ul{
  text-align: center;
  
  color: #EBFFFF;
  background-color: #104760;
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

.horizontal{
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100%; */
  flex-wrap: wrap;
  gap: 0px 25px;
  margin: 15px 0px 50px 0px;
  padding: 5px;
  
}

.horizontal a{
  /* display: inline-block; */
  position: relative;
}

.horizontal a::after{
  content: attr(data-label);
  font-weight: bold;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  display: block;
}

li{
  padding: 0;
}


body{
    margin: 0 8px;
    background-color: #082735;
    color: #EBFFFF;
    font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    
}

h2 {
    text-align: center;
      font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;    
} 

h3 {
      text-align: center;
      margin-top: 120px;
      letter-spacing: 3px;
    
      

}

.blinken {
      /* animation: blink-animation 4s; */
      animation: fadeIn 3.5s forwards;  /* Animation pro Buchstabe */
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    /* color: #104760; */
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
    transform: scale(1.3);
    
}

/* @keyframes blink-animation 
     {
      15%, 25%, 50%, 75%, 100% {opacity: 1;}
      25%, 75% {opacity: 0;}
       
    }                */
    /* visibility: hidden; */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(200px); }
    to   { opacity: 1; transform: translateY(0); }
  }
    

a {
    color: inherit;       /* übernimmt die umgebende Textfarbe */
    text-decoration: none; /* entfernt Unterstreichung */
    font-size: 1rem;
}

a.aktiv {
font-weight: bold;

}


a:hover {
    font-weight: bold;
    text-decoration: none;
  }

@media (max-width: 600px) {
            ul, li {
                flex-direction: column; /* Navigation untereinander */
                align-items: center;
            }

            /* ul, li a {
                padding: 0.8rem;
                width: 100%;
                text-align: center;
                border-bottom: 1px;
            } */

            li {
              padding: 0;
            }

            .horizontal li a {
              font-size: 0.9rem;     /* kleinere Schrift */
              padding: 0.4rem 0.6rem;
              display: inline-block;
            }

            .horizontal {
              /* display: flex;
              justify-content: center;
              align-items: center; */
              flex-wrap: wrap;
              gap: 8px;
              /* margin: 10px 0 30px 0; */

            }

            header {
                font-size: 1rem;
            }
        }